<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
  <title>Elsa Designer</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"
        integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous"/>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
          integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
          crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
          integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
          crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
          integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
          crossorigin="anonymous"></script>
  <script type="module" src="/build/elsa-workflow-designer.esm.js"></script>
  <script nomodule src="/build/elsa-workflow-designer.js"></script>

  <style type="text/css">
    html {
      font-size: 14px;
    }

    .nav-item {
      margin-left: 1em;
    }

    #header h5 {
      color: white;
    }

  </style>
</head>
<body>

<div id="header"
     class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-dark border-bottom shadow-sm">
  <h5 class="my-0 mr-md-auto font-weight-normal">Workflow Designer</h5>

  <ul class="nav">
    <li class="nav-item">
      <button class="btn btn-primary" onclick="addActivity()">Add Activity</button>
    </li>
    <li class="nav-item">
      <wf-export-button workflow-designer-host="designerHost"></wf-export-button>
    </li>
    <li class="nav-item">
      <button class="btn btn-secondary" onclick="importWorkflow()">Import</button>
    </li>
    <li class="nav-item">
      <button class="btn btn-secondary" onclick="createNewWorkflow()">New Workflow</button>
    </li>
  </ul>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-12">

      <div class="card">
        <wf-designer-host
          id="designerHost"
          canvas-height="300vh"
          plugins="PrimitiveActivities ControlFlowActivities EmailActivities HttpActivities ConsoleActivities MassTransitActivities TimerActivities"
          data-activity-definitions='[{"type": "Custom", "displayName": "Custom", "description": "Custom Activity", "category": "Custom", "designer": { "outcomes": ["Done"] }}]'
          data-workflow='{"activities":[{"id":"timer","top":137,"left":1171,"type":"TimerEvent","state":{}, "executed":true},{"id":"send-email","top":641,"left":993,"type":"SendEmail","state":{}, "blocking":true},{"id":"if-else","top":378,"left":1139,"type":"IfElse","state":{}},{"id":"log","top":644,"left":1438,"type":"Log","state":{}, "faulted":true, "message":{"title":"Faulted","content":"This didnt work."}}],"connections":[{"sourceActivityId":"timer","destinationActivityId":"if-else","outcome":"Done"},{"sourceActivityId":"if-else","destinationActivityId":"send-email","outcome":"True"},{"sourceActivityId":"if-else","destinationActivityId":"log","outcome":"False"}]}'
          readonly="false"
        >
        </wf-designer-host>
      </div>

    </div>
  </div>
</div>

<script type="text/javascript">
    const designer = document.querySelector("#designerHost");

    function addActivity() {
        designer.showActivityPicker();
    }

    function createNewWorkflow() {
        if (confirm('Are you sure you want to discard current changes?'))
            designer.newWorkflow();
    }

    function importWorkflow() {
        designer.import();
    }

</script>
</body>
</html>
